import { memo, useState } from "react";
import ProductDetailCourseStyle from "./style";
import { ProductType } from "../../../../types/product";
import { Divider, ErrorBlock, Skeleton } from "antd-mobile";
import { CourseType } from "../../../../types/course";
import { useFetch_getCrouseInfo } from "../../../../service/course";
import { useAsyncEffect } from "ahooks";
import { CardType } from "../../../../types/card";

interface cardsToCoursetype {
  cardId: string[];
  courseId: string;
  cardName: string;
  courseData: CourseType;
}

const ProductDetail = memo((props: { data: ProductType }) => {
  const { data } = props;
  const [getCourseInfo, loading]: [
    (id: string) => Promise<CourseType>,
    boolean
  ] = useFetch_getCrouseInfo() as [
    (id: string) => Promise<CourseType>,
    boolean
  ];

  const [cardsToCourseData, setCardsToCourseData] = useState<
    cardsToCoursetype[]
  >([]);

  let cardsToCourseDataMeduim: cardsToCoursetype[] = [];
  const fun = async (
    value: cardsToCoursetype,
    isMore: boolean,
    index?: number
  ) => {
    if (isMore)
      cardsToCourseDataMeduim = [
        ...cardsToCourseDataMeduim,
        value,
      ] as cardsToCoursetype[];
    else {
      cardsToCourseDataMeduim[index!] = value;
    }
  };

  useAsyncEffect(async () => {
    const cards = JSON.parse(data?.cards) as CardType[];
    if (!cards) return;
    for (const card of cards) {
      const index = cardsToCourseDataMeduim?.findIndex(
        (item) => item.courseId === card.courseId
      );
      if (index === -1) {
        const res = await getCourseInfo(card.courseId);
        const course: cardsToCoursetype = {
          cardId: [card.id],
          courseId: res.id,
          cardName: card.name,
          courseData: res,
        };
        await fun(course, true);
      } else {
        const res = await getCourseInfo(card.courseId);
        const orginCard = cardsToCourseDataMeduim?.[index];
        const course: cardsToCoursetype = {
          cardId: [...orginCard.cardId, card.id],
          courseId: res.id,
          cardName: orginCard.cardName + " / " + card.name,
          courseData: res,
        };
        await fun(course, false, index);
      }
    }
    setCardsToCourseData(cardsToCourseDataMeduim);
  }, [data?.cards]);

  return (
    <ProductDetailCourseStyle>
      {loading ? (
        <>
          <Skeleton.Title animated />
          <Skeleton.Paragraph lineCount={5} animated />
        </>
      ) : (
        <>
          <Divider />
          <div className="tip">包含消费卡</div>
          {cardsToCourseData.length > 0 ? (
            cardsToCourseData.map((item) => (
              <div className="cardTocourseWrapper" key={item.cardId[0]}>
                <div className="title">{item.cardName}</div>
                <div className="desc">{item.courseData.desc}</div>
                <Divider />
                <div className="reserveInfo moreInfo">
                  <div className="moreInfoTitle">预约信息</div>
                  <div className="moreInfoDetail">
                    {item.courseData.reserveInfo}
                  </div>
                </div>
                <Divider />
                <div className="moreInfo moreInfo">
                  <div className="moreInfoTitle">退款信息</div>
                  <div className="moreInfoDetail">
                    {item.courseData.refundInfo}
                  </div>
                </div>
                <Divider />
                <div className="otherInfo moreInfo">
                  <div className="moreInfoTitle">其他信息</div>
                  <div className="moreInfoDetail">
                    {item.courseData.otherInfo}
                  </div>
                </div>
                <Divider />
              </div>
            ))
          ) : (
            <ErrorBlock status="empty" title="该课程无绑定消费卡" />
          )}
        </>
      )}
    </ProductDetailCourseStyle>
  );
});

export default ProductDetail;
